<template>
  <div class="me" v-if="getIsPhone">
    <header-template-phone>
      <template v-slot:left>
        <div @click="checkMsg">
          <span class="icon">
            <i class="iconfont iconindex_xiaoxi"></i>
          </span>
        </div>
      </template>
      <template v-slot:right>
        <div @click="handleSettings">
          <span class="icon">
            <i class="iconfont iconsz_icon_shezhi"></i>
          </span>
        </div>
      </template>
    </header-template-phone>
    <div class="top">
      <div class="userinfo">
        <div class="row1">
          <span>vip999</span>
          <span class="account-type">代理</span>
        </div>
        <div class="row2">
          <span class="balance">
            1000.00
          </span>
          <span class="btn my-wallet" @click="checkMyWallet">
            我的钱包
          </span>
        </div>
      </div>
      <me-operate></me-operate>
      <div class="grid-nav">
        <div 
          class="grid border-right"
          @click="handleRouteSelect(item.path)" 
          v-for="(item, index) in gridData" 
          :key="item.id">
          <span class="icon" :style="{backgroundColor: item.background, border: '1px solid' + item.border}">
          </span>
          <p class="grid-name">
            {{item.gridName}}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import MeOperate from './components/me-operate'
import { mapGetters } from 'vuex'
export default {
  components: {
    HeaderTemplatePhone,
    MeOperate
  },
  data() {
    return {
      gridData: [
        {
          id: 1,
          icon: '',
          gridName: '购买记录',
          background: '#10afff',
          border: '#0f8dcc',
          path: '/orders/records/0'
        },
        {
          id: 2,
          icon: '',
          gridName: '盈亏报表',
          background: '#ea4a35',
          border: '#b92816',
          path: '/me/report'
        },
        {
          id: 3,
          icon: '',
          gridName: '追号记录',
          background: '#ff963b',
          border: '#db751d'
        },
        {
          id: 4,
          icon: '',
          gridName: '会员管理',
          background: '#ffc603',
          border: '#e2b312',
          path: '/me/member-management'
        },
        {
          id: 5,
          icon: '',
          gridName: '添加会员',
          background: '#00baff',
          border: '#0f8dcc',
          path: '/me/add-members'
        },
        {
          id: 6,
          icon: '',
          gridName: '账变明细',
          background: '#00b3e3',
          border: '#0f8dcc',
          path: '/account-update'
        },
        {
          id: 7,
          icon: '',
          gridName: '充提记录',
          background: '#ffdd00',
          border: '#dabf0f'
        },
        {
          id: 8,
          icon: '',
          gridName: '推广链接',
          background: '#00b3e3',
          border: '#0fa2c9',
          path: '/me/recommend-link'
        },
        {
          id: 9,
          icon: '',
          gridName: '操作日志',
          background: '#10afff',
          border: '#0f8dcc'
        },
        {
          id: 10,
          icon: '',
          gridName: '帮助中心',
          background: '#10afff',
          border: '#0f8dcc'
        },
        {
          id: 11,
          icon: '',
          gridName: '产品介绍',
          background: '#10afff',
          border: '#0f8dcc'
        },
        {
          id: 12,
          icon: '',
          gridName: '在线客服',
          background: '#10afff',
          border: '#0f8dcc'
        },
      ]
    }
  },
  methods: {
    checkMyWallet() {
      this.$router.push({path: '/my-account/wallet'})
    },
    handleSettings() {
      this.$router.push({path: '/my-account/setting'})
    },
    handleRouteSelect(path) {
      this.$router.push({path})
    },
    checkMsg() {
      this.$router.push({path: '/my-account/msg'})
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .top 
    box-sizing border-box 
    padding-top 48px
    .userinfo 
      height 86px 
      width 100% 
      // border 1px solid green
      box-sizing border-box 
      padding-left 36px 
      padding-right 17px
      background $color-theme-red 
      .row1 
        // margin-top 11px
        padding-top 11px
        span 
          // background:linear-gradient(0deg,rgba(250,217,177,1) 0%, rgba(254,250,224,1) 100%);
          // -webkit-background-clip:text;
          // -webkit-text-fill-color:transparent;
          font-size 15px
          color #FFF6D6
          &.account-type 
            display inline-block 
            border 1px solid #f09494
            padding 2px 3px
            border-radius 3px
      .row2 
        display flex 
        justify-content space-between 
        margin-top 11px 
        .balance 
          font-size 30px
          font-family ArialMT
          color #FFF6D6
        .btn 
          width 73px 
          height 24px 
          line-height 24px 
          text-align center
          color $color-theme-red 
          background linear-gradient(0deg,rgba(250,217,177,1),rgba(254,250,224,1))
          border-radius 24px
    .grid-nav 
      display flex 
      flex-wrap wrap
      margin-top 10px
      border-bottom 1px solid $color-divide-line
      background #fff
      .grid 
        width 33.33% 
        height 80px 
        box-sizing border-box 
        display flex 
        align-items center 
        justify-content center
        border-bottom 1px solid $color-divide-line 
        display flex 
        flex-direction column 
        .icon 
          width 24px 
          height 24px 
          border-radius 5px
          box-shadow 0px 3px 5px 0px rgba(0, 0, 0, 0.1)
          margin-bottom 10px


      
</style>
